<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <title></title>
  </head>

  <link rel="stylesheet" type="text/css" href="../css/common.css" />
  <link rel="stylesheet" type="text/css" href="../less/find.css" />
  <body>
    <div class="headBox">
      <div class="left">
        <h2>探索发现</h2>
      </div>
      <div class="right">
        <img src="../img/nav%20bar_icon_comment.png" class="comment_img" />
        <img src=".././img/nav%20bar_icon_search.png" class="search_img" />
      </div>
    </div>
    <div class="contentBox">
      <div class="bannerBox">
        <img src="../img/find_photo_banner.png" class="banner_img" />
        <div class="textBox">
          <span class="banner_text">壁纸</span>
          <img
            src="../img/home_icon_number%20of%20images.png"
            class="icon_img"
          />
          <span class="count">46</span>
        </div>
      </div>
      <div class="hotBox">
        <div class="head">
          <div class="left">
            <span class="line"></span>
            <span class="title_text">热门创作者</span>
          </div>
          <div class="right">
            <span class="more_text">查看更多</span>
            <img src="../img/home_icon_more.png" class="more_img" />
          </div>
        </div>
        <ul class="hotUl"></ul>
      </div>
      <div class="jingxunBox">
        <div class="head">
          <div class="left">
            <span class="line"></span>
            <span class="title_text">每周热门精选</span>
          </div>
        </div>
        <ul class="selectedUl"></ul>
      </div>
      <div class="clockBox">
        <div class="head">
          <div class="left">
            <span class="line"></span>
            <span class="title_text">热门创作者</span>
          </div>
          <div class="right">
            <span class="more_text">查看更多</span>
            <img src="../img/home_icon_more.png" class="more_img" />
          </div>
        </div>
        <ul class="clockUl"></ul>
      </div>
    </div>
  </body>
  <!-- <script src="js/rem.js"></script> -->
  <!-- <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> -->
  <script
    src="../js/jquery-3.5.1.min.js"
    type="text/javascript"
    charset="utf-8"
  ></script>
  <script src="../js/rem.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    var hotList = [
      {
        bg: "../img/popular%20author_img.png",
        head_img: "../img/popular%20author_photo_head%20portrait.png",
        name: "摄影师洲桦",
        workName: "资深风光摄影师",
        guanzhu: "关注",
      },
      {
        bg: "../img/popular%20author_img.png",
        head_img: "../img/popular%20author_photo_head%20portrait.png",
        name: "摄影师洲桦",
        workName: "资深风光摄影师",
        guanzhu: "关注",
      },
      {
        bg: "../img/popular%20author_img.png",
        head_img: "../img/popular%20author_photo_head%20portrait.png",
        name: "摄影师洲桦",
        workName: "资深风光摄影师",
        guanzhu: "关注",
      },
      {
        bg: "../img/popular%20author_img.png",
        head_img: "../img/popular%20author_photo_head%20portrait.png",
        name: "摄影师洲桦",
        workName: "资深风光摄影师",
        guanzhu: "关注",
      },
    ];

    var everyWeek = [
      {
        img: "../img/weekly%20top%20picks_img%20big.png",
        title: "每周精选",
        contentText: "每周五22:00更新",
      },
      {
        img: "../img/weekly%20top%20picks_img%20small.png",
        title: "创意摄影",
        contentText: "脑洞大开的创意图片",
      },
      {
        img: "../img/weekly%20top%20picks_img%20small.png",
        title: "摄影审美",
        contentText: "构图与配色的集成片",
      },
    ];

    var clockList = [
      {
        img: "../img/popular%20picture%20recommendation_img.png",
        count: "6",
        text: "超级喜欢一望无际的海洋",
        head_img: "../img/popular%20author_photo_head%20portrait.png",
        name: "追风少年",
        city: "深圳",
      },
      {
        img: "../img/popular%20picture%20recommendation_img.png",
        count: "6",
        text: "超级喜欢一望无际的海洋",
        head_img: "../img/popular%20author_photo_head%20portrait.png",
        name: "追风少年",
        city: "深圳",
      },
      {
        img: "../img/popular%20picture%20recommendation_img.png",
        count: "6",
        text: "超级喜欢一望无际的海洋",
        head_img: "../img/popular%20author_photo_head%20portrait.png",
        name: "追风少年",
        city: "深圳",
      },
      {
        img: "../img/popular%20picture%20recommendation_img.png",
        count: "6",
        text: "超级喜欢一望无际的海洋",
        head_img: "../img/popular%20author_photo_head%20portrait.png",
        name: "追风少年",
        city: "深圳",
      },
    ];
    function hotList_fn() {
      for (var i = 0; i < hotList.length; i++) {
        $(".hotUl").append(
          '<li class="hotLi"><img class="bg" src="' +
            hotList[i].bg +
            '" ><img class="head_img" src="' +
            hotList[i].head_img +
            '" ><p class="name">' +
            hotList[i].name +
            '</p><p class="workName">' +
            hotList[i].workName +
            '</p><button type="button" class="guanzhu_btn">' +
            hotList[i].guanzhu +
            "</button></li>"
        );
      }
      $(".guanzhu_btn").each(function (index) {
        $(this).on("click", function () {
          $(".hotLi").remove();
          if (hotList[index].guanzhu == "关注") {
            hotList[index].guanzhu = "已关注";
          } else {
            hotList[index].guanzhu = "关注";
          }
          console.log(index);
          hotList_fn();
        });
      });
    }
    hotList_fn();

    for (var i = 0; i < everyWeek.length; i++) {
      $(".selectedUl").append(
        '<li class="selectedLi"><img src="' +
          everyWeek[i].img +
          '" ><p class="selectedText">' +
          everyWeek[i].title +
          '</p><p class="contentText">' +
          everyWeek[i].contentText +
          "</p></li>"
      );
    }

    for (var i = 0; i < clockList.length; i++) {
      $(".clockUl").append(
        '<li class="clockLi"><img class="bg" src="' +
          clockList[i].img +
          '"><p class="count">' +
          clockList[i].count +
          '</p><img class="icon_img" src="../img/home_icon_number%20of%20images.png"><p class="text">' +
          clockList[i].text +
          '</p><span class="foot"><span class="footLf"><img class="head_img" src="' +
          clockList[i].head_img +
          '"><span class="name">' +
          clockList[i].name +
          '</span></span><span class="footRt"><span  class="city">' +
          clockList[i].city +
          "</span></span></span></li>"
      );
    }
    $(".search_img").click(function () {
      localStorage.setItem("path", "find");
      window.location.href = "../search.html";
    });
  </script>
</html>
